<template>
  <h1>双向绑定</h1>
  <input type="text" v-model="info">
  {{ info }}
  <p>{{ info }}</p>
  <hr>
  <h1>登录页面</h1>
  用户名:<input type="text" v-model="user.username"><br>
  密码:<input type="password" v-model="user.password"><br>
  性别:
  <input type="radio" name="sex" value="男" v-model="user.sex">男
  <input type="radio" name="sex" value="女" v-model="user.sex">女<br>
  联系方式:
  <select name="connect" v-model="user.connect">
    <option value="电话">电话</option>
    <option value="邮件">邮件</option>
  </select>
  <button @click="f">提交</button>
</template>

<script setup>
import {ref} from "vue";

const info = ref('测试数据');
const user = ref({username: '', password: '', sex: '', connect: ''});
const f = () => {
  console.log(user.value);
  console.log(user.value.username);
  console.log(user.value.password);
  console.log(user.value.sex);
  console.log(user.value.connect);
}
</script>

<style scoped>

</style>